<!DOCTYPE html>
<!-- saved from url=(0049)https://v3.bootcss.com/examples/navbar-fixed-top/ -->
<html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="https://v3.bootcss.com/ss.ico">

    <title>BBS_WEB_QQ chat room</title>

    <!-- Bootstrap core CSS -->
    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="/static/bootstrap/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="/static/bootstrap/css/navbar-fixed-top.css" rel="stylesheet">
    <link href="/static/css/custom.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="/static/bootstrap/js/ie-emulation-modes-warning.js"></script>


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    {% block head_css_js %}
    
    {% endblock %}
  </head>

  <body>

    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">聊天室论坛</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li ><a href="{% url 'index' %}">首页</a></li>
            <li ><a href="{% url 'category' 1 %}">论坛版块</a></li>
            <li><a href="{% url 'category' 2 %}">聊天室版块</a></li>
            <li><a href="{% url 'category' 3 %}">综合版块</a></li>
            <li><a href="{% url 'board'%}">专区聊天室</a></li>

          </ul>
          <ul class="nav navbar-nav navbar-right">
                <!--判断是否登陆-->
              {% if request.user.is_authenticated %}
{#                  {{ request.user.id }}#}
                <li class="dropdown">
                  <a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ request.user.userprofile.name }} <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="{% url 'new_article' %}">发贴</a></li>
                    <li><a href="">Another action</a></li>
                    <li><a href="">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li><a href="">Separated link</a></li>
                    <li><a href="{% url 'logout' %}">注销</a></li>
                  </ul>
                </li>
              {% else %}
                  <li class="list-inline"><a href="{% url 'login' %}">登陆</a></li>
                  <li><a href="{% url 'register' %}">注册</a></li>
             {% endif %}

          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container">
        {% block page-container %}
          <!--页面可包含替换 -->
          <!-- Main component for a primary marketing message or call to action -->
          <div class="jumbotron row">
            <div class="col-md-8 left-contnet-panel" >
                <!--文章显示框 -->
                <div class="content-box">
                <!--文章作者图片  reversed 最后为上-->
                {% for article in articles reversed %}
                    <div class="article-box row">
                         <!--文章作者图片 -->
                        <div class="article-head-img col-md-3">
{#                            {{ article.head_img }}#}
                            <img src="/{{ article.head_img }}">
                        </div>
                        <!--文章标题 -->
                        <div class="article-title col-md-8">
                            <h4><a href="{% url 'article_detail' article.id %}">{{ article.title }}</a></h4>
                            <div class="article-attr">
                                <!--文章点赞相关 -->
                                <ul class="list-inline">
                                    <li>{{ article.author.name }}</li>
                                    <li>{{ article.publish_date }}</li>
                                    <li>{{ article.thumbup_set.select_related.count }}</li>
                                    <li>{{ article.comment_set.select_related.count }}</li>
                                </ul>
                                <!--文章简介 -->
                                <div>{{ article.summary }}</div>
                            </div>
                        </div>
                        <hr>
                    </div>
                  {% endfor %}
              </div>
            </div>
            <div class="col-md-4 right-sidebar">
                right
            </div>

          </div>
            <p>
              <a class="btn btn-lg btn-primary" href="" role="button">返回顶部</a>
            </p>
        {% endblock %}

        {% block comment_trees %}
            <!-- 评论树-->
        {% endblock %}
    </div> <!-- /container -->
    {% block online_visitors %}
        <div class="modal-footer center-block">
             <foot>
                 <li>
                    <a href="javascript:void(0)" id="online-visitors" title="点击显示在线访客">在线访客<span class="pull-right">[{{count}}]</span></a>
                 </li>
            </foot>
        </div>
    {% endblock %}
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="/static/bootstrap/js/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="/static/bootstrap/js/jquery.min.js"><\/script>')</script>
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="/static/bootstrap/js/ie10-viewport-bug-workaround.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){//页面加载调用
            var menu=$('#navbar a[href="{{ request.path }}"]')[0];//找到匹配的URL 列表中只有一个值
            $(menu).parent().addClass('active');//父级加上选 中样式
            $(menu).parent().siblings().removeClass('active');//父级的其它兄弟取消 选中样式
        })
    </script>
  {% block foot_js %}
  <!-- 下方JS -->
  {% endblock %}


</body></html>